<template>
  <view style="flex: 1;">
    <view class="person-head">
      <cmd-avatar src="https://avatar.bbs.miui.com/images/noavatar_small.gif" @click="fnInfoWin" size="lg" :make="{'background-color': '#fff'}"></cmd-avatar>
      <view class="person-head-box">
        <view class="person-head-name">{{name}}</view>
        <view class="person-head-id">ID:{{id}}</view>
      </view>
    </view>
		<br>
    <view class="person-list">
			<cmd-cell-item title="项目立项" slot-left arrow @click="projectSet">
			  <cmd-icon type="money" size="24" color="#368dff"></cmd-icon>
			</cmd-cell-item>
      <cmd-cell-item title="我的项目" slot-left arrow @click="projectFind">
        <cmd-icon type="bullet-list" size="24" color="#368dff"></cmd-icon>
      </cmd-cell-item>
      <cmd-cell-item title="我的预约" slot-left arrow @click="reservatioFind">
        <cmd-icon type="message" size="24" color="#368dff"></cmd-icon>
      </cmd-cell-item>
      <cmd-cell-item title="系统设置" slot-left arrow>
        <cmd-icon type="settings" size="24" color="#368dff"></cmd-icon>
      </cmd-cell-item>
      <cmd-cell-item title="检查版本" addon="v1.0" slot-left arrow>
        <cmd-icon type="alert-circle" size="24" color="#368dff"></cmd-icon>
      </cmd-cell-item>
    </view>
  </view>
</template>

<script>
  import cmdAvatar from "@/components/cmd-avatar/cmd-avatar.vue"
  import cmdIcon from "@/components/cmd-icon/cmd-icon.vue"
  import cmdCellItem from "@/components/cmd-cell-item/cmd-cell-item.vue"
  import service from '../../service.js';
  import {
  	mapState,
  	mapMutations
  } from 'vuex'
  import store from '../../store/index.js'
	
  export default {
    components: {
      cmdAvatar,
      cmdCellItem,
      cmdIcon
    },
    data() {
      return {
				name: store.state.userName,
				id: store.state.userId
			}
    },
		computed: mapState(['userName','userId']),
    methods: {
      /**
       * 打开用户信息页
       */
      fnInfoWin() {
        uni.navigateTo({
          url: '/pages/user/info'
        });
				console.log(store.state.userId);
				console.log(store.state.userName);
      },
			projectSet() {
				uni.navigateTo({
					url: '/pages/user/setProject',
				});
			},
			projectFind(){
				uni.navigateTo({
					url:'/pages/user/my_project'
				});
			},
			reservatioFind(){
				uni.navigateTo({
					url:'/pages/user/my_reservation'
				});
			}
    }
  }
</script>

<style lang="scss">
  .person {
    &-head {
      display: flex;
      flex-direction: row;
      align-items: center;
      height: 150px;
			// width: 100%;
      padding-left: 20px;
      background: linear-gradient(to right, #0faeff, #87CEEB);

      &-box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        margin-left: 10px;
      }

      &-name {
        font-size: 18px;
        font-weight: 500;
        color: #fff;
      }

      &-id {
        font-size: 14px;
        font-weight: 500;
        color: #fff;
      }
    }

    &-list {
      line-height: 0;
    }
  }
</style>
